import Vue, { defineComponent, ref, h, reactive, resolveComponent, toRaw, toRefs, onMounted, getCurrentInstance } from 'vue';
import { ValidateErrorEntity } from 'ant-design-vue/es/form/interface';
import './login.less';
interface LoginForm {
    userName: string,
    password: string,
}
export default defineComponent({
    props: {},
    setup(props, { emit }) {
        const { proxy } = (getCurrentInstance() as any);
        const loading = ref(true);
        const handerLoading = ref(false);
        const rberme = ref(false);
        // 表单对象
        const LoginForm = reactive<LoginForm>({
            userName: 'admin',
            password: '123456'
        })
        // 表单规则
        const formRules = ref<any>({
            userName: [
                { required: true, message: '账号不能为空', trigger: 'blur' },
                { min: 4, max: 20, message: '账号4-20个字符', trigger: 'blur' },
            ],
            password: [
                { required: true, message: '密码不能为空', trigger: 'blur' },
                { min: 6, max: 12, message: '密码6-12个字符', trigger: 'blur' },
            ],
        })
        // 登录
        const handerLogin = () => {
            handerLoading.value = true;
            proxy.$refs.LoginRef
                .validate()
                .then(() => {
                    setTimeout(() => {
                        handerLoading.value = false;
                        console.log('values', LoginForm, toRaw(LoginForm));
                    }, 3000)
                })
                .catch((error: ValidateErrorEntity<LoginForm>) => {
                    console.log('error', error);
                });
        }
        const changeRberme = (val: any) => {
            rberme.value = val
        }
        onMounted(() => {
            setTimeout(() => {
                loading.value = false
            }, 1500)
        })
        return {
            LoginForm,
            formRules,
            handerLogin,
            loading,
            handerLoading,
            rberme,
            changeRberme,
        }
    },
    render() {
        return (
            <div class="login_container">
                {
                    h(
                        resolveComponent('ACard'),
                        {
                            style: {},
                            class: 'form_card',
                            hoverable: true,
                            loading: this.loading,
                            headStyle: {
                                background: '#283593',
                                color: '#ffffff'
                            },
                            bodyStyle: {
                                background: 'url("https://images.pexels.com/photos/5485174/pexels-photo-5485174.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500") no-repeat center',
                                backgroundSize: 'cover',
                            }
                        },
                        {
                            title: 'Login In',
                            extra: (props: any) => (
                                <a-button type="link" onClick="onSubmit">注册</a-button>
                            ),
                            default: (props: any) => (
                                <div style="margin:0 auto;width: 80%;">
                                    <a-form ref="LoginRef" model={this.LoginForm}
                                        rules={this.formRules}
                                        label-col={{ span: 4 }}
                                        wrapper-col={{ span: 20 }}
                                    >
                                        <a-form-item ref="userName" label="账号" name="userName">
                                            <a-input v-model:value={this.LoginForm.userName} ></a-input>
                                        </a-form-item>
                                        <a-form-item ref="password" label="密码" name="password">
                                            <a-input type="password" v-model:value={this.LoginForm.password} />
                                        </a-form-item>
                                        <a-row align={'center'} justify={'space-between'}>
                                            <a-col span={6} offset="4">
                                                <a-checkbox v-model:checked={this.rberme} onChange={(val: any) => this.changeRberme(val)}>记住我</a-checkbox>
                                            </a-col>
                                            <a-col span={4} pull="2">
                                                <a-button type="link" onClick="onSubmit">忘记密码？</a-button>
                                            </a-col>
                                        </a-row>
                                        <a-row align={'center'} justify={'center'}>
                                            <a-col span="16" offset="4">
                                                <a-button block loading={this.loading} type="primary" onClick={() => this.handerLogin()}>登录</a-button>
                                            </a-col>
                                        </a-row>
                                    </a-form>
                                </div>
                            ),
                        }
                    )
                }
            </div>
        )
    }
})